import React, { useCallback } from "react";
import { ReactPhotoSphereViewer } from "react-photo-sphere-viewer";
import { CubemapTilesAdapter } from "@photo-sphere-viewer/cubemap-tiles-adapter";

type Props = {
  height?: string;
  width?: string;
};

const PhotoSphere: React.FC<Props> = ({
  height = "100%",
  width = "100%",
}) => {
  const panoramaConfig: any = {
    faceSize: 2048,
    nbTiles: 4,
    baseUrl: {
      left: '/cube/cubemap_left_low.jpg',
      front: '/cube/cubemap_front_low.jpg',
      right: '/cube/cubemap_right_low.jpg',
      back: '/cube/cubemap_back_low.jpg',
      top: '/cube/cubemap_top_low.jpg',
      bottom: '/cube/cubemap_bottom_low.jpg',
    },
    tileUrl: (face: string, col: number, row: number) => {
      return `/cube/${face}_${col}_${row}.jpg`;
    },
  };

  const handleReady = useCallback((instance: any) => {
    // example: start autorotate if available
    if (instance && typeof instance.startAutoRotate === "function") {
      // start autorotate slowly
      try {
        instance.startAutoRotate();
      } catch (e) {
        // ignore
      }
    }
  }, []);

  return (
    <div style={{ width, height }}>
      <ReactPhotoSphereViewer
        src={panoramaConfig}
        panorama={panoramaConfig}
        adapter={CubemapTilesAdapter}
        height={height}
        width={width}
        onReady={handleReady}
        navbar={true}
        defaultZoomLvl={40}
      />
    </div>
  );
};

export default PhotoSphere;
